<template>
	<view class="tab">
		<view class="tradingTab-mod">
			<view class="tradingTab-title">申请卖出</view>
			<view class="tradingTab-mod-wrap">
				<view class="tradingTab-content">
					<view class="tradingTab-count">
						<view class="tradingTab-count-item">
							<view class="itemsSum">
								<view>
									<text :class="color6">卖出实时价：</text>
									<text class="color7">{{price}} RMB</text>
								</view>
							</view>
							<view class="itemsCount">
								账户余额：
								{{userInfo.price || 0}} BHT
							</view>
						</view>
			
					</view>
					<view class="tradingTab-group">
						<view class="uni-list">
							<view class="tradingTab-list-cell">
								<view class="tradingTab-list-cell-label">
									卖出数量
								</view>
								<view class="tradingTab-list-cell-db">
									<picker @change="bindPickerChange" :value="index" :range="numsArray">
										<view class="input">{{numsArray[index]}}</view>
									</picker>
								</view>
								<view class="tradingTab-list-cell-button">
									BHT
								</view>
							</view>
							<view class="tradingTab-list-cell">
								<view class="tradingTab-list-cell-label">
									总金额
								</view>
								<view class="tradingTab-list-cell-db color7">
									{{totalNumber}}
								</view>
								<view class="tradingTab-list-cell-button">
									RMB
								</view>
							</view>
						</view>
						<van-cell-group>
						  <van-field
							center
							clearable
							:value="pwdtwo"
							type="password"
							label="二级密码"
							title-width="140rpx"
							placeholder="请输入二级密码"
							@change="cPassword"
							>
						  </van-field>
						</van-cell-group>
					</view>
					<view class="btn-wrap">
						<button class="base-btn" @tap="MGCsell">卖出</button>
					</view>
				</view>
			</view>
			<view class="btn-details-wrap">
				<button class="base-btn no" @tap="onPageBuy(1)">查看我的挂卖</button>
			</view>
		</view>
	</view>
</template>

<script>
import {regPayPassword} from '../../../common/utils/reg.js';
import { mapActions, mapGetters } from 'vuex';
export default {
	props: {
		price: {
			type: Number
		}
	},
	data() {
		return {
			pwdtwo: '',
			numsArray: [],
			idArray: [],
			index: 0
		};
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		}),
		totalNumber () {
			if (!this.price) {
				return 0
			}
			return parseFloat(this.numsArray[this.index] * this.price).toFixed(2)
		}
	},
	methods: {
		...mapActions([
			'setUserInfo'
		]),
		getBuyList () {
			this.MGCmesllnums()
		},
		MGCmesllnums () {
			let numsArr = []
			let idArr = []
			this.$http.MGCmesllnums().then(res => {
				const data = res.data
				uni.stopPullDownRefresh()
				if (data.success) {
					data.data.forEach(e => {
						numsArr.push(e.nums)
						idArr.push(e.id)
					})
					this.numsArray = numsArr
					this.idArray = idArr
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		},
		MGCsell () {
			const pwd = regPayPassword(this.pwdtwo)
			if (pwd) {
				uni.showToast({
					title: pwd, 
					icon: 'none'
				});
				return
			}
			uni.showLoading({
				title: '挂卖中...'
			})
			uni.hideKeyboard()
			this.$http.MGCsell({
				id: this.idArray[this.index],
				pwdtwo: this.pwdtwo
			}).then(res => {
				const data = res.data
				uni.hideLoading()
				if (data.success) {
					uni.showModal({
						title: '挂卖成功',
						content: `${data.data=== 1 ? '' : '挂卖且已匹配成功，'}挂卖数量: ${this.numsArray[this.index]}`,
						confirmText: '查看挂卖',
						cancelText: '继续挂卖',
						success: (res) => {
							if (res.confirm) {
								this.onPageBuy(data.data)
							}
						}
					});
					this.pwdtwo = ''
					this.userInfo.price = parseFloat(this.userInfo.price - this.numsArray[this.index]).toFixed(2)
					this.setUserInfo(this.userInfo).then(e => {})
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		},
		bindPickerChange(e) {
		    this.index = e.target.value
		},
		cPassword(e) {
			this.pwdtwo = e.detail
		},
		onPageBuy (id) {
			uni.navigateTo({
				url: '/pages/trading/record/sell/index?tab=' + (id-1)
			})
		}
	},
	onPullDownRefresh() {
		this.getBuyList()
	}
};
</script>

<style scoped lang="scss">
.tradingTab-mod {
	position: relative;
	width: 100%;
	text-align: center;
	.tradingTab {
		&-title {
			padding: 30upx;
			font-size: 34upx;
			text-align: left;
		}
		&-count {
			margin: 10upx 0;
			text-align: left;
			font-size: 26upx;
			&-item {
				padding: 0 10upx;
				.itemsSum {
					display: flex;
				}
				.itemRule {
					margin-top: 20upx;
					margin-bottom: 20upx;
					font-size: 20upx;
					line-height: 1.4;
					color: #7e7e7e;
				}
				.itemsCount {
					margin-bottom: 20upx;
					font-size: 24upx;
					color: #9b9b9b;
					.color1 {
						font-size: 28upx;
						font-size: 500;
					}
				}
				.recharge {
					margin-left: 20upx;
					color: #6eb92b;
					font-size: 600;
					text-decoration: underline;
				}
			}
		}
		&-group {
			text-align: left;
			margin-bottom: 40upx;
		}
		&-list-cell{
			display: flex;
			padding: 14upx 40upx;
			line-height: 24px;
			margin-bottom: 20upx;
			color: #333;
			background-color: transparent;
			border: 1upx solid #3E527E;
			border-radius: 10upx;
			&-label{
				width: 140upx;
				color: #1e1e1e;
			}
			&-db {flex: 1;}
			&-button {
				padding-left: 10px;
				color: #999;
			}
		}
		&-submit-btn {
			height: 80upx;
			line-height: 76upx;
			color: #fff;
			font-size: 32upx;
			border-color: #3E527E;
			background-color: #3E527E;
			border-radius: 10upx;
			box-shadow: 0 0.4upx 0.12upx #dddddd;
			&.sell-btn {
				background-color: #1dd445;
			}
		}
	}
	&-wrap {
		padding: 10upx 30upx 60upx 30upx;
		background-color: #fff;
	}
	.btn-details-wrap {
		padding: 60upx 30upx;
		.no {
			color: #3E527E;
			background-color: #fff;
			border: 2upx solid #3E527E;
		}
	}
	.btn-wrap {
	}
}
</style>
